<template>
	<view class="good-share-popup" v-if="visibile">
		<view class="shadow" @click="onCloseClick">
			<image src="/static/fanli/313.png" class="close"></image>
		</view>
		
		<view class="con">
			<image :src="pic" class="pic" mode="widthFix"></image>
			<button open-type="share" class="btn-share">分享给好友</button>
			<view class="buttons">
				<button class="btn-primary" @click="onCopyClick">复制文案</button>
				<button class="btn-primary" @click="onSaveClick">下载图文</button>
			</view>
		</view>
	</view>
</template>

<script>
    import { JSMRequest } from '@/module/api'
	
	export default {
        name: 'good-share',
        props: ['item', 'index'],
		data() {
			return {
				visibile: false,
				pic: null,
				text: null,
			}
		},
		computed: {
			userInfo () {
				return this.$store.state.userInfo
			}
		},
		methods: {
			onSaveClick () {
				console.log("保存图片")
				let _t = this
				let authSuccess = () => {
					let imgSrc = _t.pic
					uni.downloadFile({
						url: imgSrc,
						success: function (res) {
							console.log(res);
							//图片保存到本地
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function (data) {
									uni.showToast({
										title: '保存成功',
										icon: 'success',
										duration: 2000
									})
								},
								fail: function (err) {
									console.log(err);
									if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
										console.log("当初用户拒绝，再次发起授权")
										uni.openSetting({
											success(settingdata) {
												console.log(settingdata)
												if (settingdata.authSetting['scope.writePhotosAlbum']) {
													console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
												} else {
													console.log('获取权限失败，给出不给权限就无法正常使用的提示')
												}
											}
										})
									}
								}
							})
						}
					})
				}
				
				uni.getSetting({
					success(res) {
						console.log(res)
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope:'scope.writePhotosAlbum',
								success () {
									authSuccess()
								}
							})
						}else{
							authSuccess()
						}
					}
				})
			},
			
			onCopyClick () {
				uni.setClipboardData({
					data: this.text,
					success: () => {
						uni.showToast({
							icon: "none",
							title: "复制成功"
						})
					}
				})
			},
			
			onCloseClick () {
				this.visibile = false
				this.pic = null
				this.text = null
			},
			
			onItemClick (item, index){
                this.$emit('on-item-click', item, index)
            },
			
			show ({id, type, text}) {
				this.text = text
				let data = {}
				let invite = this.userInfo.code
				if(type == 1){
					data.itemid = id
					data.scene = `iv=${invite}&p=jgd&id=${id}`
				}else{
					data.good_id = id
					data.scene = `iv=${invite}&p=sgd&id=${id}`
				}
				data.scene = decodeURIComponent(data.scene)
				
				uni.showLoading({
					mask: true,
					title: '请求中...'
				})
				
				JSMRequest({
					tag: type == 1 ? "jsm-good-share" : "jsm-self-good-share",
					params: data
				}).then(({data}) => {
					uni.hideLoading()
					this.visibile = true
					this.pic = data
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.good-share-popup{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 100;
		
		.shadow{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0,0,0,.75);
			
			.close{
				position: absolute;
				right: 40px;
				top: 40px;
				width: 40px;
				height: 40px;
			}
		}
		
		.con{
			position: relative;
			
			.pic{
				width: 500px;
			}
			
			.btn-share{
				width: 100%;
				height: 92px;
				border-radius: 46px;
				font-size: 28px;
				color: #FFFFFF;
				background:linear-gradient(270deg,rgba(255,92,120,1) 0%,rgba(231,38,31,1) 100%);
				margin-top: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.btn-primary{
				width: calc(~"50% - 15px");
				height: 92px;
				border-radius: 46px;
				font-size: 28px;
				color: #FFFFFF;
				background: #f77f1f;
				margin-top: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.buttons{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
	}
</style>
